<template>
  <div class="aside" :class="asideVisible ? 'open': 'close'">
    <div class="search">
      <el-input
        v-model="filterText"
        clearable
        placeholder="请输入内容"
      >
        <i slot="prefix" class="el-input__icon el-icon-search" />
      </el-input>
    </div>
    <transition name="fade">
      <!--      <el-scrollbar style="height:calc(100% - 50px)">-->
      <div v-show="asideVisible" v-loading="loading" class="aside-main" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
        <el-tree
          ref="tree"
          class="aside-tree"
          :data="tree"
          :default-expanded-keys="defaultExpandedKeys"
          :default-expand-all="true"
          :node-key="nodeKey"
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          highlight-current
          @current-change="currentChange"
        >
          <span slot-scope="{ data }" class="tree-node">
            <img v-show="data.isVideo && data.isOnline" :src="require('@/assets/online.png')" alt="">
            <img v-show="data.isVideo && !data.isOnline" :src="require('@/assets/outline.png')" alt="">
            <span class="node-label" :title="data.label">{{ data.label }}</span>
            <div v-show="data.isVideo && data.isOnline" style="font-size: 12px; color: #67C23A;">在线</div>
            <div v-show="data.isVideo && !data.isOnline" style="font-size: 12px; color: #AFBDD1; color: rgba(175, 189, 209, 0.4);">离线</div>
            <!-- <el-dropdown v-if="mouseButton && data.isEnterprise!==1" trigger="click" placement="bottom" @click.native.stop="()=>{}">
              <span class="icon-r">
                <img class="more-icon" :src="require('@/assets/more-icon.png')" alt="">
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="add(data)">添加子机构</el-dropdown-item>
                <el-dropdown-item @click.native="edit(data)">编辑当前机构</el-dropdown-item>
                <el-dropdown-item @click.native="del(data)">删除当前机构</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown> -->
          </span>
        </el-tree>
      </div>
      <!--      </el-scrollbar>-->
    </transition>
  </div>
</template>

<script type="text/jsx">
  import { delaData } from '@/utils'

  export default {
    props: {
      loading: {
        type: Boolean,
        default: false
      },
      nodeKey: {
        type: String,
        default: 'id'
      },
      expandedLevel: {
        type: Number,
        default: 2
      },
      treeData: {
        type: Array,
        default: []
      },
      selectItem: {
        default: null
      },
      title: {
        type: String,
        required: true
      },
      mouseButton: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        asideVisible: true,
        defaultExpandedKeys: [],
        filterText: ''
      }
    },
    computed: {
      tree() {
        return this.treeData
      }
    },
    watch: {
      treeData: {
        handler(val) {
          if (val && val.length > 0) {
            this._getExpandedKeys(val)
            this.$nextTick(() => {
              const arr = delaData(val)
              const child = arr.filter(item => item.isVideo && item.isOnline)[0]
              if (!child) return
              this.$refs.tree.setCurrentKey(child[this.nodeKey])
              this.currentChange(child)
            })
          }
        },
        immediate: true
      },
      filterText(val) {
        this.$refs.tree.filter(val)
      }
    },
    methods: {
      filterNode(value, data, node) {
        // if (!value) return true
        // return data.label.indexOf(value) !== -1
        if (!value) return true
        let parentNode = node.parent; let labels = [node.label]; let level = 1
        while (level < node.level) {
          labels = [...labels, parentNode.label]
          parentNode = parentNode.parent
          level++
        }
        return labels.some(label => label.indexOf(value) !== -1)
      },
      visibleChange() {
        this.asideVisible = !this.asideVisible
      },
      currentChange(data) {
        this.$emit('currentChange', data)
      },
      _getExpandedKeys(data, level = 1) {
        data.forEach(item => {
          if (level < this.expandedLevel) {
            this.defaultExpandedKeys.push(item[this.nodeKey])
            if (item.children) {
              this._getExpandedKeys(item.children, level + 1)
            }
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
.aside {
  position: relative;
  height: 100%;
  //border-right: 1px solid #f0f0f0;
  transition: width 0.3s ease-in-out;
  .search {
    margin-bottom: 12px;
    /deep/ .el-input__inner {
      color: #AFBDD1;
      background-color: #F0F2F5;
      border: 1px solid #DCDFE6;
      border-color: transparent;
      border-radius: 50px;
    }
  }
  .aside-wrapper {
    width: 244px;
  }
  &.open {
    width: 244px;
  }
  &.close {
    width: 50px;
  }
  .aside-title {
    height: 50px;
    padding-left: 20px;
    overflow: hidden;
    line-height: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px solid #f0f0f0;
    .hamburger-container {
      display: inline-block;
      float: right;
      width: 50px;
      height: 100%;
      padding: 0 !important;
      line-height: 50px;
      text-align: center;
      &:hover {
        background-color: rgba(0, 0, 0, 0.025);
      }
    }
  }
}
.aside-main {
  height: calc(100% - 32px);
  overflow: hidden;
  &:hover {
    overflow-y: auto;
  }
}
.aside-tree {
  .more-icon {
    vertical-align: middle;
  }
  .more-icon:hover {
    background-color: #0b2a50;
  }
  .svg-icon {
    color: #c0c4cc;
  }
  & /deep/ .el-tree-node__expand-icon {
    font-size: 16px;
  }
  & /deep/ .el-tree-node__content {
    height: 32px;
    padding-right: 5px;
    margin: 2px 0;
    line-height: 32px;
    &:hover {
      color: #fff;
      background: rgba(25, 118, 210, 0.3);
    }
  }
  & /deep/ .is-current > .el-tree-node__content {
    position: relative;
    color: #fff;
    background: rgba(25, 118, 210, 0.6);
  }
  .tree-node {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 80%;
    & > img {
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-top: 7px;
    }
    .node-label {
      display: inline-block;
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    & /deep/ .el-dropdown {
      margin: 0 10px;
      .icon-r {
        color: #c0c4cc;
        &:hover {
          color: #afbdd1;
        }
      }
    }
  }
}
.aside /deep/ {
  .el-scrollbar__wrap {
    overflow-x: hidden;
  }
  .el-tree > .el-tree-node {
    display: inline-block;
    max-width: 244px;
    min-width: 100%;
  }
}
/deep/ .el-tree-node:focus > .el-tree-node__content {
  background: rgba(25, 118, 210, 0.6);
}
/deep/ .el-tree-node__children {
  .is-current {
    position: relative;
    &::before {
      position: absolute;
      top: 14px;
      right: 34px;
      width: 5px;
      height: 5px;
      background-color: transparent !important;
      border-radius: 50%;
      content: '';
    }
  }
}
</style>
